<template>
  <div class="alumniCertificate">
    <div class="form_box">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
        <div
          class="modele1"
          style="background: white; width: 100%; padding: 0px 10px"
        >
          <!-- 校友证明 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="校友证明"></u--text>
          </div>
          <div>
            <!-- 同学姓名 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div
                  :style="{
                    marginLeft: '12px',
                    fontSize: '15px',
                  }"
                >
                  同学姓名 ：
                </div>
              </template>
              <u--input
                v-model="model1.userInfo.studentsName"
                border="none"
                placeholder="请填写2-3名同班同学姓名"
              ></u--input>
            </u-form-item>
            <!-- 老师姓名 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div
                  :style="{
                    marginLeft: '12px',
                    fontSize: '15px',
                  }"
                >
                  老师姓名 ：
                </div>
              </template>
              <u--input
                v-model="model1.userInfo.teacherName"
                border="none"
                placeholder="请填写2-3名老师姓名"
              ></u--input>
            </u-form-item>
            <!-- 校友邀请认证 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div
                  :style="{
                    marginLeft: '12px',
                    fontSize: '15px',
                  }"
                >
                  校友邀请认证 ：
                </div>
              </template>
              <div style="display: flex" @click="show = true">
                <u--input
                  v-model="model1.userInfo.alumniName"
                  disabled
                  disabledColor="#ffffff"
                  placeholder="请邀请校友认证"
                  border="none"
                ></u--input>

                <div
                  @click.stop="clearContent"
                  style="display: flex; align-items: center"
                >
                  <u-icon
                    :name="iconClear"
                    v-if="model1.userInfo.alumniName"
                  ></u-icon>
                </div>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </div>
            </u-form-item>
          </div>
          <!-- 校友认证说明 -->
          <div class="explain" style="padding: 10px">
            <u--text
              v-for="item in explain"
              :key="item"
              :text="item"
              color="#9a9fa7"
              size="12"
              lineHeight="22px"
              margin="10px 0px"
            ></u--text>
          </div>
        </div>

        <div
          class="modele1"
          style="width: 100%; padding: 0px 10px; margin-top: 10px"
        >
          <button
            class="login_btn"
            type="primary"
            @click="formSubmit"
            style="
              background: #1990ff;
              font-size: 18px;
              border-radius: 10px;
              margin-top: 100px;
            "
          >
            提交认证
          </button>
        </div>
      </u--form>
      <!-- 邀请校友认证选择器 -->
      <u-picker
        :show="show"
        :columns="columns"
        closeOnClickOverlay="true"
        @close="show = false"
        @confirm="pickerConfirm"
        @cancel="show = false"
      >
      </u-picker>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表单竖线图
      src: require("@/static/index/shuxian.png"),
      iconClear: require("@/static/index/icon_clear.png"),
      //邀请校友认证
      show: false,
      columns: [["刘尚宪", "路哈", "刘德华"]],
      // 表单数据
      model1: {
        userInfo: {
          studentsName: "", //同学姓名
          teacherName: "", //老师姓名
          alumniName: "", //校友邀请姓名
        },
      },
      // 校友认证说明
      explain: [
        "• 填写校友证明信息可以快速完成校友身份审核",
        "• 支持在都安高中短时读过书的校友注册",
        "• 支持在都安高中短时读过书的校友注册",
        "• 如校友信息认证匹配失败，请耐心等待老师审核",
      ],
      rules: {
        //表单校验
        "userInfo.experience": {
          type: "string",
          required: true,
          message: "请填写在校经历",
          trigger: ["blur", "change"],
        },
        "userInfo.entrance": {
          type: "string",
          required: true,
          message: "请填写入学年份",
          trigger: ["blur", "change"],
        },
        "userInfo.leave": {
          type: "string",
          required: true,
          message: "请填写离校年份",
          trigger: ["blur", "change"],
        },
        "userInfo.class": {
          type: "string",
          required: true,
          message: "请填写在校班级",
          trigger: ["blur", "change"],
        },
        "userInfo.teacher": {
          type: "string",
          required: true,
          message: "请填写班主任/任课老师",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  methods: {
    //邀请校友选择器
    pickerConfirm(n) {
      console.log(n, "确定");
      this.model1.userInfo.alumniName = n.value[0];
      this.show = false;
    },
    clearContent() {
      if (this.model1.userInfo.alumniName != "") {
        this.show = false;
        this.model1.userInfo.alumniName = "";
      } else {
        this.model1.userInfo.alumniName = "";
        this.show = false;
      }
    },
    //表单提交
    formSubmit() {
      let data = this.model1.userInfo;
      if (data.alumniName == "") {
        this.$children[0].validate().then((res) => {
          uni.showToast({
            title: "提交成功！",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                console.log(data, res);
                uni.redirectTo({
                  url: `/pages/index/index`,
                });
              }, 600);
            },
          });
        });
      } else {
        uni.showModal({
          confirmText: "发送",
          title: "发送校友认证",
          content:
            "已认证校友将看到你的校友认证邀请并同意后，你的校友认证即通过。",
          success: (res) => {
            if (res.confirm) {
              this.$children[0].validate().then((res) => {
                uni.showToast({
                  title: "提交成功！",
                  duration: 2000,
                  success: () => {
                    setTimeout(() => {
                      console.log(data, res);
                      uni.redirectTo({
                        url: `/pages/index/index`,
                      });
                    }, 800);
                  },
                });
              });
              console.log(data, res);
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form_box {
  box-sizing: border-box;
  background: #eef2fb;
  .cell1 {
    padding: 10px 0px;
    display: flex;
    border-bottom: 1px solid #e8e9ea;
    box-sizing: border-box;
  }
  .cell_join {
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
  }
}
</style>